<template>
  <div class="app-container"
       v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading">
    <div class="h-2 w-100 d-flex">
      <div class="h-100 w-50 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title pl5px">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼配电箱房间总控</div>
            </div>
          </div>
          <div class="item_content d-flex align-items-center flex-wrap pt-2">
            <div v-for="(item,index) in oneBuildData" :key="index" class="width-9 h-50 p5">
              <div class="w-100 h-100 d-flex-center font-white border_two" @click="setStatusByDevice(item, 'one')"
                   :class="dataCardBgColor[item.socketColor]">
                {{oneBuildTitle[index]}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="h-100 w-50 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title pl5px">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">2号楼配电箱房间总控</div>
            </div>
          </div>
          <div class="item_content d-flex align-items-center flex-wrap pt-2">
            <div v-for="(item,index) in twoBuildData" :key="index" class="width-9 h-50 p5">
              <div class="w-100 h-100 d-flex-center font-white border_two" @click="setStatusByDevice(item, 'two')"
                   :class="dataCardBgColor[item.socketColor]">
                {{twoBuildTitle[index]}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-4 w-100 p10">
      <div class="h-100 w-100 item_border p10">
        <div class="item_title2 pl5px">
          <div class="d-flex align-items-center">
            <div class="success_point"></div>
            <div class="font-white font-14">3号楼配电箱房间总控</div>
          </div>
        </div>
        <div class="item_content2 d-flex align-items-center flex-wrap">
          <div v-for="(item1,index1) in threeBuildData1" :key="index1+'item1'" class="width-66 h-1 p5">
            <div class="w-100 h-100 d-flex-center font-white border_two" @click="setStatusByDevice(item1, 'three')"
                 :class="dataCardBgColor[item1.socketColor]">
              {{threeBuildTitle1[index1]}}
            </div>
          </div>
          <div v-for="(item2,index2) in threeBuildData2" :key="index2+'item2'" class="width-66 h-1 p5">
            <div class="w-100 h-100 d-flex-center font-white border_two" @click="setStatusByDevice(item2, 'four')"
                 :class="dataCardBgColor[item2.socketColor]">
              {{threeBuildTitle2[index2]}}
            </div>
          </div>
          <div v-for="(item3,index3) in threeBuildData3" :key="index3+'item3'" class="width-66 h-1 p5">
            <div class="w-100 h-100 d-flex-center font-white border_two" @click="setStatusByDevice(item3, 'five')"
                 :class="dataCardBgColor[item3.socketColor]">
              {{threeBuildTitle3[index3]}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    queryOneList,
    queryTwoList,
    queryThreeList,
    queryFourList,
    queryFiveList,
  } from "@/api/electrician/index"
  import { makeDeviceControl } from "@/api/dormOneBuildingOneFloor/electricityManagement";

  export default {
    components: {},
    data() {
      return {
        timeout: [],

        dataCardBgColor: ['item_bg_close', 'item_bg_open', 'item_bg_danger', 'item_bg_blue', 'item_bg_warning', 'bg-index-red', 'bg-index-orange'],

        oneBuildData: [],
        oneBuildTitle: ['1113室', '1114室', '1115室', '1214室', '1215室', '1216室', '1314室', '1315室',
          '1316室', '1317室', '1318室', '1414室', '1415室', '1416室', '1417室',
          '1418室', '1514室', '1515室', '1516室', '1517室', '1518室',],
        twoBuildData: [],
        twoBuildTitle: ['2113室', '2114室', '2115室', '2214室', '2215室', '2216室', '2314室', '2315室',
          '2316室', '2317室', '2318室', '2414室', '2415室', '2416室', '2417室',
          '2418室', '2514室', '2515室', '2516室', '2517室', '2518室'],

        threeBuildData1: [],
        threeBuildTitle1: ['3101室', '3102室', '3103室', '3104室', '3105室', '3106室', '3107室', '3108室', '3109室', '3110室', '3111室', '3112室', '3113室', '3114室', '3115室',
          '3201室', '3202室', '3203室', '3204室', '3205室', '3206室', '3207室', '3208室', '3209室', '3210室', '3211室', '3212室', '3213室', '3214室', '3215室'],

        threeBuildData2: [],
        threeBuildTitle2: [
          '3216室', '3217室', '3301室', '3302室', '3303室', '3304室', '3305室', '3306室', '3307室', '3308室', '3309室', '3310室', '3311室', '3312室', '3313室', '3314室',
          '3315室', '3316室', '3317室', '3318室', '3319室', '3401室', '3402室', '3403室', '3404室', '3405室', '3406室', '3407室', '3408室', '3409室'],

        threeBuildData3: [],
        threeBuildTitle3: ['3410室', '3411室', '3412室', '3413室', '3414室', '3415室', '3416室', '3417室', '3418室', '3419室', '3501室', '3502室', '3503室',
          '3504室', '3505室', '3506室', '3507室', '3508室', '3509室', '3510室', '3511室', '3512室', '3513室', '3514室', '3515室', '3516室', '3517室', '3518室', '3519室'],

        loading: false,
        dataItem: {},
        cardIndex: "",
      }
    },
    created() {

    },
    mounted() {
      this.queryOneList()
      this.queryTwoList()
      this.queryThreeList()
      this.queryFourList()
      this.queryFiveList()

      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneList()
        _this.queryTwoList()
        _this.queryThreeList()
        _this.queryFourList()
        _this.queryFiveList()
      }, 5000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryOneList() {
        queryOneList().then(res => {
          this.oneBuildData = res.object || []
        })
      },
      queryTwoList() {
        queryTwoList().then(res => {
          this.twoBuildData = res.object || []
        })
      },
      queryThreeList() {
        queryThreeList().then(res => {
          this.threeBuildData1 = res.object || []
        })
      },
      queryFourList() {
        queryFourList().then(res => {
          this.threeBuildData2 = res.object || []
        })
      },
      queryFiveList() {
        queryFiveList().then(res => {
          this.threeBuildData3 = res.object || []
        })
      },


      setStatusByDevice(data, card) {
        this.dataItem = data
        this.cardIndex = card

        let obj = {}
        if (data.deviceList[data.deviceList.length - 2].deviceValue == '0') {
          obj = {
            command: '65365',
            commandName: '合闸',
            parameterCode: 'CTRL',
          }
        } else {
          obj = {
            command: '65280',
            commandName: '分闸',
            parameterCode: 'CTRL',
          }
        }
        this.editControl(obj, 'other')
      },
      editControl(data, type) {
        let titleName = '确定执行此操作吗, 是否继续?'
        if (type == 'other') {
          if (data.commandName == '合闸') {
            titleName = '确定执行合闸操作吗, 是否继续?'
          } else {
            titleName = '确定执行分闸操作吗, 是否继续?'
          }
        }
        this.$confirm(titleName, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {

          this.loading = true
          makeDeviceControl({
            deviceCode: this.dataItem.deviceCode,
            parameterCode: data.parameterCode,
            command: data.command,
            commandName: data.commandName,
          }).then(res => {
            if (res.status == 200 && (res.message == '指令发送成功' || res.message == '指令发送成功等待核验')) {
              setTimeout(() => {
                this.loading = false
                this.loading2 = false

                if (this.cardIndex == 'one') {
                  this.queryOneList()
                } else if (this.cardIndex == 'two') {
                  this.queryTwoList()
                } else if (this.cardIndex == 'three') {
                  this.queryThreeList()
                } else if (this.cardIndex == 'four') {
                  this.queryFourList()
                } else {
                  this.queryFiveList()
                }

                this.$message({
                  type: "success",
                  message: res.message
                })
              }, 2000)
            } else {
              this.loading = false
            }
          })
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          })
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .width-9{
    width: 9%;
  }

  .item_bg_open {
    background-color: #1AA652;
    cursor: pointer;
  }

  .item_bg_open:hover {
    transform: scale(1.05);
  }

  .item_bg_danger {
    background-color: #df547b;
    cursor: pointer;
  }

  .item_bg_danger:hover {
    transform: scale(1.05);
  }

  .item_bg_close {
    background-color: #7A7A7A;
    cursor: pointer;
  }

  .item_bg_close:hover {
    transform: scale(1.05);
  }

  .item_bg_blue {
    background: #2C637A;
    cursor: pointer;
  }

  .item_bg_blue:hover {
    transform: scale(1.05);
  }

  .item_bg_warning {
    background: #B3A12F;
    cursor: pointer;
  }

  .item_bg_warning:hover {
    transform: scale(1.05);
  }

  .bg-index-red {
    background: #AF1F1F;
    cursor: pointer;
  }

  .bg-index-red：hover {
    transform: scale(1.05);
  }

  .border_two {
    border-radius: 6px;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .width-66 {
    width: 6.66%;
  }
</style>
